<!-- 
  副作用
    1. 是什么：DOM操作、接口调用、setTimeout、setInterval、全局事件监听、事件订阅 等操作都叫做副作用

  纯函数
    1. 没有包含副作用的函数，且不能修改参数，且满足相同的输入一定产生相同的输出，就可以说该函数是个纯函数。

    function add() {
      return 10
    }

    function add() {
      return Math.random() + 10
    }

    async function add() {
      const resp = await fetch()
      return resp
    }

    function add(obj) {
      obj.x = 10
      return 10
    }

 -->

<template>
  <div>
    <p>当前鼠标 x: {{ mouseX }}</p>
    <p>当前鼠标 y: {{ mouseY }}</p>

    <hr />
    <button @click="show = !show">Toggle</button>
    <Hello v-if="show" />

    <hr />
    <World />
  </div>
</template>

<script>
// 引入拆分出去的 useMouse 这个组合式函数（hook）
// import useMouse from './hooks/useMouse'
import { ref } from 'vue'
import Hello from './components/Hello.vue'
import World from './components/World.vue'

export default {
  components: {
    Hello,
    World,
  },

  setup() {
    // const { x, y } = useMouse()

    const { x, y } = { x: 10, y: 20 }

    const show = ref(true)

    return {
      mouseX: x,
      mouseY: y,
      show,
    }
  },
}
</script>
